<template>
    <div>
        <top-simple-search @searchFun="getList">
            <template slot="other-button">
                <el-button
                        type="primary"
                        @click="toAdd"
                        size="small"
                        v-if="state==3"
                        v-has-permi="['Create']"

                >新增消息
                </el-button>
                <template v-else>
                    <el-button
                            type="primary"
                            plain
                            @click="allRead"
                            size="small"
                            v-if="state < 2"
                    >全部已读</el-button>
                    <el-button
                            type="primary"
                            @click="getMsgDelete"
                            size="small"
                            v-has-permi="['qingkong']"
                            v-if="state == 0"

                    >清空
                    </el-button>
                </template>
            </template>
        </top-simple-search>
        <simple-table ref="myTable" size="mini" v-bind="$attrs" v-on="$listeners" :formatter="dataFormatter">
            <my-title-column align="left" prop="title" label="标题" @click="toDetail"></my-title-column>
            <el-table-column align="left" prop="creator_info.creator_alias" label="发送人" width="100">
            </el-table-column>
            <el-table-column align="left" prop="gmt_created" label="时间" width="200">
            </el-table-column>
            <el-table-column align="left" fixed="right" label="操作" width="150">
                <template slot-scope="{ row }">
                    <detail-button @click="toDetail(row)"></detail-button>
                    <my-button @click="showDetailDialog(row)" handle="tongji" v-if="isMySend">统计</my-button>
                    <template v-else>
                        <my-button @click="editNews(row)" handle="yidu" v-if="row.unread">已读</my-button>
                        <delete-button @click="toDelete(row.id)"></delete-button>
                    </template>
                </template>
            </el-table-column>
        </simple-table>
        <detail-dialog  v-if="visible" :visible.sync="visible" :row="currRow" @reloadList="getList" :disabled="disabled"></detail-dialog>
        <count-detail-dialog :visible.sync="detailDialog" v-if="detailDialog" :id="currRow.id" :type="currRow.type_id"></count-detail-dialog>
    </div>
</template>
<script>
    import api from "@/api/userSettings/msg/index";
    import simpleTable from "@/mixins/SimpleTable";
    import DetailDialog from "./DetailDialog";
    import MyTitleColumn from "@/components/TableColumn/MyTitleColumn";
    import CountDetailDialog from "./CountDetailDialog";
    export default {
        name:"TableList",
        components: {CountDetailDialog, MyTitleColumn, DetailDialog},
        mixins: [simpleTable],
        props: {
            state: {
                type: Number,
                default: 0
            }
        },
        computed:{
            isMySend(){
                return this.state === 3
            }
        },
        data(){
            return {
                detailDialog:false
            }
        },
        methods:{
            showDetailDialog(row){
                this.currRow = row
                this.detailDialog = true
            },
            dataFormatter(data){
                let list = data.map(item=>{
                    item = {...item.mssages,...item}
                    delete item.mssages
                    return item
                });
                return list
            },
            allRead() {
                this.$confirm("确认全部标记吗?", "提示", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning"
                }).then(() => {
                    api.msgAllRead().then(() => {
                        this.getList();
                    });
                });
            },
            getMsgDelete(){
                this.$confirm("清空数据, 是否继续?", "提示", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning"
                }).then(() => {
                    api.getMsgDelete().then(res=>{
                        this.msgSuccess(res.msg);
                        this.getList()
                    })
                });
            },
            editNews(item) {
                //console.log(item);
                api.readMsg(item.id).then(res => {
                    this.getList();
                });
            },
        }
    }
</script>
